<template>
    <el-container>
        <el-header style="margin-bottom: 60px;">
            <h2>新增员工</h2>
        </el-header>
        <el-main>
            <div>
                <el-form :model="forms" label-width="auto" style="width: 700px;height: 400px;margin: auto;">
                    <el-form-item label="姓名">
                        <el-input v-model="forms.name" aria-required="true" />
                    </el-form-item>
                    <el-form-item label="用户名" @change="showUsername">
                        <el-input v-model="forms.username" />
                    </el-form-item>
                    <el-form-item label="密码">
                        <el-input v-model="forms.password"  @change="showPassword" type="password"/>
                    </el-form-item>
                    <el-form-item label="手机号">
                        <el-input v-model="forms.phone" @change="showPhone" />
                    </el-form-item>
                    <el-form-item label="更新人">
                        <el-input v-model="forms.update_person" />
                    </el-form-item>
                    <el-form-item label="角色" style="width: 355px;">
                        <el-select  v-model="forms.roleid" placeholder="请选择">
                        <el-option v-for="item in role_list " :key="item.id" :label="item.name" :value="item.id" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="部门"  style="width: 355px;">
                        <el-select v-model="forms.departmentid" placeholder="请选择">
                        <el-option v-for="item in department_list " :key="item.id" :label="item.name" :value="item.id" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="职位"  style="width: 355px;">
                        <el-select v-model="forms.positionid" placeholder="请选择">
                        <el-option v-for="item in position_list " :key="item.id" :label="item.name" :value="item.id" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="头像">
                        <input type="file" accept="image/png, image/jpeg" @change="imageChange" />
                    </el-form-item>
                    <el-form-item  #default="scope">
                        <el-button type="success" @click="postuser(scope.row)">提交</el-button>
                    </el-form-item>

                </el-form>
                
                
            </div>
        </el-main>
    </el-container>

</template>

<script setup>
import { ref } from 'vue'
import axios from 'axios'
import { onMounted } from 'vue';
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import http from "../../http";  
const router = useRouter()

let forms = ref({
  name: '',
  username: '',
  password: '',
  phone: '',
  update_person:'',
  roleid: '',
  departmentid:'',
  positionid:'',
  avatar: '',
})
const imageChange=(e)=>{
    // console.log(e)
    forms.value.avatar= e.target.files[0];
}
const postuser = () => {
  console.log(forms)
  http.post(`/app/staff/postuser/`,forms.value,{headers:{'Content-Type':'multipart/form-data'}})
  .then(res=>{
    console.log(res)
    if (res.message=="添加成功"){
        ElMessage.success('添加成功')
        router.push('/user')
    }
  })
  .catch(err=>{
    console.log(err)
    ElMessage.error('添加失败')
  })
}
let role_list =ref([]);
const getRoleList = () => {
  http.get(`/app/role/get_role`)
  .then(res=>{
    // console.log(res)
    role_list.value = res.data.data
  })
}
let department_list =ref([]);
const getDepartmentList = () => {
    http.get(`/app/dep`)
    .then(res=>{
        // console.log(res)
        department_list.value = res.data
    })
}
let position_list =ref([]);
const getPositionList = () => {
    http.get(`/app/pos`)
    .then(res=>{
        // console.log(res)
        position_list.value = res.data
    })
}
onMounted(()=>{
    getRoleList()
    getDepartmentList()
    getPositionList()
})
// 判断用户名
const showUsername =()=>{
    console.log(forms.value.username)
    http.post(`/app/staff/get_username/`,{username:forms.value.username})
    .then(res=>{
        // console.log(res)
        if (res.data.message=="该用户名已注册"){
            ElMessage.error('该用户名已注册')
            forms.value.username=''
        }
        if (res.data.message=="该用户名未注册"){
            ElMessage.success('用户名可用')
        }

    })
}
// 判断密码
const showPassword =()=>{
    console.log(forms.value.password)
    http.post(`/app/staff/get_password/`,{password:forms.value.password})
    .then(res=>{
        console.log(res)
        if (res.data.message == '密码必须包含字母，数字，特殊字符'){
            ElMessage.error('密码必须包含字母，数字，特殊字符')
            forms.value.password=''
        }
        else{
            ElMessage.success('密码可用')
        }
    })
}
// 判断手机号
const showPhone =()=>{
    console.log(forms.value.phone)
    http.post(`/app/staff/get_phone/`,{phone:forms.value.phone})
    .then(res=>{
        console.log(res)
        if (res.data.message=="手机号可用"){
            ElMessage.success('手机号可用')
        }
        if (res.data.message=="手机号已注册"){
            ElMessage.error('手机号不可用')
            forms.value.phone=''
        }
    })
}

</script>

<style scoped>
.el-input {
    width: 300px;
    height: 30px;
}
label[required]::after {
  content: '*';
  color: red;
  margin-left: 5px;
}
</style>